import 'package:flutter/material.dart';
import '../models/hexagram.dart';
import '../constants/colors.dart';
import '../widgets/gradient_background.dart';
import 'share_poster_page.dart';

class HexagramDetailPage extends StatefulWidget {
  final Hexagram hexagram;
  
  const HexagramDetailPage({Key? key, required this.hexagram}) : super(key: key);

  @override
  State<HexagramDetailPage> createState() => _HexagramDetailPageState();
}

class _HexagramDetailPageState extends State<HexagramDetailPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<String> _tabs = ['卦辞', '爻辞', '解析', '应用'];
  
  // 五行对应的颜色
  final Map<String, List<Color>> _elementColors = {
    '金': [Color(0xFFFFD700), Color(0xFFDAA520)],
    '木': [Color(0xFF4CAF50), Color(0xFF2E7D32)],
    '水': [Color(0xFF2196F3), Color(0xFF0D47A1)],
    '火': [Color(0xFFFF5722), Color(0xFFD84315)],
    '土': [Color(0xFF795548), Color(0xFF4E342E)],
  };
  
  // 模拟数据
  final Map<String, String> _guaciData = {
    '乾为天': '元亨利贞。初九，潜龙，勿用。九二，见龙在田，利见大人。九三，君子终日乾乾，夕惕若，厉，无咎。九四，或跃在渊，无咎。九五，飞龙在天，利见大人。上九，亢龙，有悔。用九，见群龙无首，吉。',
    '坤为地': '元亨，利牝马之贞。君子有攸往，先迷后得主，利西南得朋，东北丧朋。安贞吉。初六，履霜，坚冰至。六二，直方大，不习无不利。六三，含章可贞，或从王事，无成有终。六四，括囊，无咎无誉。六五，黄裳，元吉。上六，龙战于野，其血玄黄。用六，利永贞。',
    '水雷屯': '元亨利贞，勿用有攸往，利建侯。初九，磐桓，利居贞，利建侯。六二，屯如邅如，乘马班如，匪寇婚媾，女子贞不字，十年乃字。六三，即鹿无虞，惟入于林中，君子几不如舍，往吝。六四，乘马班如，求婚媾，往吉，无不利。九五，屯其膏，小贞吉，大贞凶。上六，乘马班如，泣血涟如。',
  };
  
  final Map<String, List<String>> _yaoData = {
    '乾为天': [
      '初九：潜龙，勿用。',
      '九二：见龙在田，利见大人。',
      '九三：君子终日乾乾，夕惕若，厉，无咎。',
      '九四：或跃在渊，无咎。',
      '九五：飞龙在天，利见大人。',
      '上九：亢龙，有悔。',
      '用九：见群龙无首，吉。'
    ],
    '坤为地': [
      '初六：履霜，坚冰至。',
      '六二：直方大，不习无不利。',
      '六三：含章可贞，或从王事，无成有终。',
      '六四：括囊，无咎无誉。',
      '六五：黄裳，元吉。',
      '上六：龙战于野，其血玄黄。',
      '用六：利永贞。'
    ],
    '水雷屯': [
      '初九：磐桓，利居贞，利建侯。',
      '六二：屯如邅如，乘马班如，匪寇婚媾，女子贞不字，十年乃字。',
      '六三：即鹿无虞，惟入于林中，君子几不如舍，往吝。',
      '六四：乘马班如，求婚媾，往吉，无不利。',
      '九五：屯其膏，小贞吉，大贞凶。',
      '上六：乘马班如，泣血涟如。'
    ],
  };
  
  final Map<String, String> _analysisData = {
    '乾为天': '乾卦代表天，象征刚健、纯阳、创造力和领导力。乾为天，天行健，君子以自强不息。乾卦教导人们要像天一样，不断运动，永不停息，保持旺盛的生命力和创造力。\n\n乾卦六爻全阳，代表纯粹的阳刚之气，象征着事物发展的开始阶段，充满生机和活力。乾卦提醒人们要保持坚韧不拔的意志，积极进取的精神，同时也要注意适度，避免过于刚强而失去弹性。',
    '坤为地': '坤卦代表地，象征柔顺、包容、承载和滋养。坤为地，地势坤，君子以厚德载物。坤卦教导人们要像大地一样，宽厚包容，承载万物，滋养生命。\n\n坤卦六爻全阴，代表纯粹的阴柔之气，象征着事物发展的孕育阶段，充满包容和接纳。坤卦提醒人们要保持谦逊柔顺的态度，厚德载物的胸怀，同时也要有坚韧的意志，不因柔顺而失去原则。',
    '水雷屯': '屯卦由坎（水）上震（雷）下组成，象征初始的艰难和障碍。屯为难，屯为萌芽，万物始生之时，充满艰难险阻。屯卦教导人们在起始阶段要有耐心和毅力，克服困难，稳健前行。\n\n屯卦提醒人们新生事物的开始往往充满困难，需要坚持不懈的努力和智慧的谋划。如同春雷激荡，雨水滋润，万物开始萌发生长，虽然过程艰难，但只要坚持，终将突破困境，获得成长。',
  };
  
  final Map<String, String> _applicationData = {
    '乾为天': '事业：处于上升阶段，充满活力和创造力，适合开拓新领域，展现领导才能。但需注意不可过于刚强，应适当柔和，避免冲突。\n\n健康：阳气充足，精力旺盛，但需注意不可过度劳累，保持作息规律，避免透支。\n\n感情：主动积极，富有魅力，但需注意尊重对方，避免过于强势。\n\n财运：财运亨通，适合投资和创业，但需谨慎决策，避免冒进。',
    '坤为地': '事业：稳健发展，适合务实工作，积累经验和资源。需保持耐心和恒心，不急于求成。\n\n健康：阴柔之体，需注意保暖和休息，避免过度劳累，保持平和心态。\n\n感情：温柔体贴，包容理解，适合长期稳定的关系，但需注意自我价值的体现。\n\n财运：财运稳定，适合储蓄和长期投资，避免投机和冒险。',
    '水雷屯': '事业：处于起步阶段，面临诸多困难和挑战，需要坚持不懈，稳步推进，避免急躁冒进。\n\n健康：需注意情绪管理，避免焦虑和压力过大，保持充足的休息和适当的运动。\n\n感情：关系可能处于不稳定阶段，需要耐心沟通，共同面对困难，避免冲动决策。\n\n财运：财务状况可能不稳定，需谨慎理财，避免大额支出和投资，积累资源为未来做准备。',
  };

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 获取上下卦对应的颜色
    List<Color> upperColors = _elementColors[widget.hexagram.upperElement] ?? 
        [AppColors.primaryGradientStart, AppColors.primaryGradientEnd];
    List<Color> lowerColors = _elementColors[widget.hexagram.lowerElement] ?? 
        [AppColors.primaryGradientStart, AppColors.primaryGradientEnd];
    
    return Scaffold(
      body: GradientBackground(
        child: SafeArea(
          child: Column(
            children: [
              _buildHeader(),
              _buildHexagramSymbol(upperColors, lowerColors),
              const SizedBox(height: 20),
              _buildTabBar(),
              Expanded(
                child: Container(
                  margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 10,
                        offset: const Offset(0, -3),
                      ),
                    ],
                  ),
                  child: ClipRRect(
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30),
                    ),
                    child: TabBarView(
                      controller: _tabController,
                      children: [
                        _buildGuaciTab(),
                        _buildYaoTab(),
                        _buildAnalysisTab(),
                        _buildApplicationTab(),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: _buildBottomButtons(),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Row(
        children: [
          IconButton(
            icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
            onPressed: () => Navigator.pop(context),
          ),
          Expanded(
            child: Center(
              child: Text(
                widget.hexagram.name,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.share, color: Colors.black),
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => SharePosterPage(
                    hexagram: widget.hexagram,
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _buildTabBar() {
    return Container(
      margin: const EdgeInsets.fromLTRB(16, 0, 16, 0),
      height: 46,
      decoration: BoxDecoration(
        color: Colors.grey.withOpacity(0.2),
        borderRadius: BorderRadius.circular(25),
        border: Border.all(color: Colors.grey.withOpacity(0.3), width: 1),
      ),
      child: TabBar(
        controller: _tabController,
        indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(23),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.08),
              blurRadius: 4,
              offset: const Offset(0, 1),
            ),
          ],
        ),
        indicatorSize: TabBarIndicatorSize.tab,
        labelColor: AppColors.primaryGradientStart,
        unselectedLabelColor: Colors.black,
        labelStyle: const TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 14,
        ),
        unselectedLabelStyle: const TextStyle(
          fontWeight: FontWeight.normal,
          fontSize: 14,
        ),
        padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 3),
        tabs: _tabs.map((String tab) => Tab(
          child: Container(
            alignment: Alignment.center,
            child: Text(tab),
          ),
        )).toList(),
      ),
    );
  }

  Widget _buildHexagramSymbol(List<Color> upperColors, List<Color> lowerColors) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 20),
      child: Row(
        children: [
          // 卦象符号
          Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [upperColors[0], lowerColors[0]],
              ),
              shape: BoxShape.circle,
              boxShadow: [
                BoxShadow(
                  color: upperColors[0].withOpacity(0.3),
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ],
            ),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    widget.hexagram.upperSymbol,
                    style: const TextStyle(
                      color: Colors.black,
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    widget.hexagram.lowerSymbol,
                    style: const TextStyle(
                      color: Colors.black,
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 20),
          // 卦象信息
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  widget.hexagram.name,
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 8),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Text(
                    '上卦：${widget.hexagram.upperElement} · 下卦：${widget.hexagram.lowerElement}',
                    style: const TextStyle(
                      color: Colors.black,
                      fontSize: 12,
                    ),
                  ),
                ),
                const SizedBox(height: 8),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Text(
                    '五行关系：${widget.hexagram.elementRelation}',
                    style: const TextStyle(
                      color: Colors.black,
                      fontSize: 12,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildGuaciTab() {
    String guaci = _guaciData[widget.hexagram.name] ?? 
        '${widget.hexagram.name}：${widget.hexagram.description}\n\n(详细卦辞数据正在加载中...)';
    
    return SingleChildScrollView(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('卦辞全文'),
          const SizedBox(height: 16),
          _buildContentCard(guaci),
          const SizedBox(height: 24),
          _buildSectionTitle('卦辞解读'),
          const SizedBox(height: 16),
          _buildContentCard('卦辞是对整个卦象的总体描述，揭示了事物发展的整体趋势和关键特点。通过理解卦辞，我们可以把握事物的本质和发展方向。\n\n${widget.hexagram.name}卦的卦辞揭示了${widget.hexagram.upperElement}与${widget.hexagram.lowerElement}之间的${widget.hexagram.elementRelation}关系，提示我们在当前形势下应当采取的态度和行动。'),
        ],
      ),
    );
  }

  Widget _buildYaoTab() {
    List<String> yaoTexts = _yaoData[widget.hexagram.name] ?? 
        ['初爻：根据卦象特性，此爻表示起始阶段的状态。',
         '二爻：进一步发展，需要稳固基础。',
         '三爻：处于中间位置，关键的转折点。',
         '四爻：接近目标，但仍需谨慎前行。',
         '五爻：达到理想状态，但需警惕骄傲。',
         '上爻：事物发展的终点，需要总结经验。'];
    
    return SingleChildScrollView(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('六爻详解'),
          const SizedBox(height: 16),
          ...yaoTexts.asMap().entries.map((entry) {
            int index = entry.key;
            String text = entry.value;
            return Padding(
              padding: const EdgeInsets.only(bottom: 16.0),
              child: _buildYaoCard(index, text),
            );
          }).toList(),
          const SizedBox(height: 24),
          _buildSectionTitle('爻辞说明'),
          const SizedBox(height: 16),
          _buildContentCard('爻辞是对卦中每一爻的具体解释，反映了事物发展的不同阶段和变化。通过分析爻辞，我们可以更加细致地了解事物发展的各个环节和可能出现的情况。\n\n在实际应用中，可以根据自己的具体情况，参考相应的爻辞，获取更有针对性的指导。'),
        ],
      ),
    );
  }

  Widget _buildAnalysisTab() {
    String analysis = _analysisData[widget.hexagram.name] ?? 
        '${widget.hexagram.name}卦象解析：\n\n此卦由${widget.hexagram.upperElement}（上卦）和${widget.hexagram.lowerElement}（下卦）组成，象征着两种能量的相互作用。\n\n上下卦的关系为${widget.hexagram.elementRelation}，表明当前形势下内外环境的互动状态。\n\n此卦提醒我们要注意平衡内在与外在的力量，根据卦象特性调整自己的行动策略。';
    
    return SingleChildScrollView(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('卦象结构分析'),
          const SizedBox(height: 16),
          _buildElementAnalysisCard(),
          const SizedBox(height: 24),
          _buildSectionTitle('卦象详细解析'),
          const SizedBox(height: 16),
          _buildContentCard(analysis),
          const SizedBox(height: 24),
          _buildSectionTitle('历史文化背景'),
          const SizedBox(height: 16),
          _buildContentCard('《易经》作为中国古代最重要的经典之一，包含了丰富的哲学思想和智慧。${widget.hexagram.name}卦在历史上有着重要的地位和影响，历代学者对其有着不同的解读和应用。\n\n通过了解卦象的历史文化背景，我们可以更加深入地理解其内涵和现代意义。'),
        ],
      ),
    );
  }

  Widget _buildApplicationTab() {
    String application = _applicationData[widget.hexagram.name] ?? 
        '事业：根据${widget.hexagram.name}卦的特性，当前事业发展需要注重${widget.hexagram.upperElement}与${widget.hexagram.lowerElement}的平衡，两者关系为${widget.hexagram.elementRelation}，建议采取相应策略。\n\n健康：注意调节作息，保持身心平衡，特别是与${widget.hexagram.upperElement}、${widget.hexagram.lowerElement}相关的身体部位。\n\n感情：在人际关系中保持真诚沟通，理解彼此的需求和期望，避免冲突。\n\n财运：财务状况受${widget.hexagram.elementRelation}关系影响，建议根据卦象特性调整理财策略。';
    
    List<String> aspects = application.split('\n\n');
    
    return SingleChildScrollView(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('现代生活应用'),
          const SizedBox(height: 16),
          ...aspects.map((aspect) {
            List<String> parts = aspect.split('：');
            if (parts.length >= 2) {
              String title = parts[0];
              String content = parts.sublist(1).join('：');
              return _buildAspectCard(title, content);
            }
            return _buildContentCard(aspect);
          }).toList(),
          const SizedBox(height: 24),
          _buildSectionTitle('参考建议'),
          const SizedBox(height: 16),
          _buildContentCard('以上解读仅供参考，在实际应用中，应结合自身情况和具体环境，灵活运用卦象的智慧。\n\n易经作为一种思维方式和智慧体系，其价值在于启发我们从多角度思考问题，而非简单地预测未来。'),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: AppColors.textPrimary,
      ),
    );
  }

  Widget _buildContentCard(String content) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(8),
      child: Text(
        content,
        style: const TextStyle(
          fontSize: 16,
          height: 1.8,
          color: AppColors.textPrimary,
        ),
      ),
    );
  }

  Widget _buildYaoCard(int index, String text) {
    List<String> yaoNames = ['初爻', '二爻', '三爻', '四爻', '五爻', '上爻'];
    String yaoName = index < yaoNames.length ? yaoNames[index] : '爻${index + 1}';
    
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: AppColors.primaryGradientStart,
              shape: BoxShape.circle,
            ),
            child: Center(
              child: Text(
                '${index + 1}',
                style: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  yaoName,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: AppColors.textPrimary,
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  text,
                  style: const TextStyle(
                    fontSize: 16,
                    height: 1.6,
                    color: AppColors.textPrimary,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildElementAnalysisCard() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              _buildElementBox(widget.hexagram.upperElement, true),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '上卦：${widget.hexagram.upperElement}',
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: AppColors.textPrimary,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      _getElementDescription(widget.hexagram.upperElement),
                      style: const TextStyle(
                        fontSize: 14,
                        color: AppColors.textSecondary,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Row(
            children: [
              _buildElementBox(widget.hexagram.lowerElement, false),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '下卦：${widget.hexagram.lowerElement}',
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: AppColors.textPrimary,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      _getElementDescription(widget.hexagram.lowerElement),
                      style: const TextStyle(
                        fontSize: 14,
                        color: AppColors.textSecondary,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Row(
              children: [
                const Icon(
                  Icons.info_outline,
                  color: AppColors.primaryGradientStart,
                  size: 20,
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Text(
                    '五行关系：${widget.hexagram.elementRelation}',
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: AppColors.textPrimary,
                    ),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
          Text(
            _getRelationshipDescription(widget.hexagram.elementRelation),
            style: const TextStyle(
              fontSize: 14,
              height: 1.6,
              color: AppColors.textSecondary,
            ),
          ),
        ],
      ),
    );
  }
  
  Widget _buildAspectCard(String title, String content) {
    IconData icon;
    Color iconColor;
    
    switch (title.toLowerCase()) {
      case '事业':
        icon = Icons.work;
        iconColor = Colors.blue;
        break;
      case '健康':
        icon = Icons.favorite;
        iconColor = Colors.red;
        break;
      case '感情':
        icon = Icons.favorite_border;
        iconColor = Colors.pink;
        break;
      case '财运':
        icon = Icons.attach_money;
        iconColor = Colors.amber;
        break;
      default:
        icon = Icons.info;
        iconColor = Colors.purple;
    }
    
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.only(bottom: 16),
      padding: const EdgeInsets.all(8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: iconColor.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(
                  icon,
                  color: iconColor,
                  size: 20,
                ),
              ),
              const SizedBox(width: 12),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: AppColors.textPrimary,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Text(
            content,
            style: const TextStyle(
              fontSize: 15,
              height: 1.6,
              color: AppColors.textPrimary,
            ),
          ),
        ],
      ),
    );
  }
  
  Widget _buildElementBox(String element, bool isUpper) {
    List<Color> colors = _elementColors[element] ?? 
        [AppColors.primaryGradientStart, AppColors.primaryGradientEnd];
    
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: colors,
        ),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: colors[0].withOpacity(0.3),
            blurRadius: 8,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Center(
        child: Text(
          element,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
  
  String _getElementDescription(String element) {
    switch (element) {
      case '金':
        return '金代表坚硬、收敛、肃杀，象征着秋季、西方、干燥、刚毅。';
      case '木':
        return '木代表生长、舒展、柔韧，象征着春季、东方、温和、仁爱。';
      case '水':
        return '水代表流动、寒冷、向下，象征着冬季、北方、智慧、灵活。';
      case '火':
        return '火代表炎热、上升、光明，象征着夏季、南方、热情、礼仪。';
      case '土':
        return '土代表厚重、包容、中正，象征着四季交替、中央、诚信、稳定。';
      default:
        return '此元素代表着自然界的基本力量之一，影响着万物的运行规律。';
    }
  }
  
  String _getRelationshipDescription(String relationship) {
    switch (relationship) {
      case '相生':
        return '相生关系表示两种元素之间相互促进、相互滋养的关系，如木生火、火生土、土生金、金生水、水生木。在卦象中，相生关系通常预示着事物发展的顺利和和谐。';
      case '相克':
        return '相克关系表示两种元素之间相互制约、相互抑制的关系，如木克土、土克水、水克火、火克金、金克木。在卦象中，相克关系通常预示着事物发展中可能存在的挑战和冲突。';
      case '相同':
        return '相同关系表示两种元素属性相同，能量相似。在卦象中，相同关系通常预示着事物发展的稳定和一致，但也可能缺乏变化和创新。';
      default:
        return '上下卦之间的关系决定了卦象的整体特性和能量流动方向，影响着事物发展的趋势和结果。';
    }
  }
  
  Widget _buildBottomButtons() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, -3),
          ),
        ],
      ),
      child: Row(
        children: [
          Expanded(
            child: ElevatedButton.icon(
              icon: const Icon(Icons.bookmark_border, size: 20),
              label: const Text('收藏'),
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('已收藏')),
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.white,
                foregroundColor: AppColors.primaryGradientStart,
                elevation: 0,
                padding: const EdgeInsets.symmetric(vertical: 12),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                  side: BorderSide(color: AppColors.primaryGradientStart),
                ),
              ),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: ElevatedButton.icon(
              icon: const Icon(Icons.chat, size: 20),
              label: const Text('咨询解卦'),
              onPressed: () {
                // 导航到咨询页面
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: AppColors.primaryGradientStart,
                foregroundColor: Colors.white,
                elevation: 0,
                padding: const EdgeInsets.symmetric(vertical: 12),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
